<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>完成代练 - 三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background-color: #f0f2f5; }
        .phone-frame { width: 375px; height: 812px; background: #000; border-radius: 40px; padding: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.2); position: relative; overflow: hidden; }
        .phone-screen { width: 100%; height: 100%; background: white; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
        .content-area { flex: 1; overflow-y: auto; padding-bottom: 80px; }
        .content-area::-webkit-scrollbar { width: 4px; }
        .content-area::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 2px; }
        .section-title { display: flex; align-items: center; font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px; }
        .section-title i { margin-right: 8px; }
        .upload-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
        .upload-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid #e5e7eb; position: relative; }
        .upload-thumb .remove-btn { position: absolute; top: -8px; right: -8px; background: #ef4444; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; border: 2px solid #fff; }
        .upload-add { width: 64px; height: 64px; border-radius: 8px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 28px; cursor: pointer; border: 1px dashed #cbd5e1; transition: border-color 0.2s; }
        .upload-add:hover { border-color: #2563eb; color: #2563eb; }
        .tip { font-size: 13px; color: #6b7280; margin-top: 8px; }
        .submit-btn[disabled] { background: #cbd5e1; cursor: not-allowed; }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <div class="flex-shrink-0 flex items-center z-10">
                    <button class="p-2 -ml-2 focus:outline-none" onclick="window.history.back()">
                        <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                </div>
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">完成凭证</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto z-10" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center cursor-pointer" title="更多">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容区域 -->
            <div class="content-area">
                <div class="p-4">
                    <!-- 完成提示语输入 -->
                    <div class="bg-white rounded-xl p-4 shadow-sm mb-4">
                        <div class="section-title">
                            <i class="fas fa-check-circle text-green-400"></i>
                            <span>完成提示语</span>
                        </div>
                        <textarea id="finishMsg" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-400 resize-none" rows="3" maxlength="50" placeholder="请输入提示语，如：已完成代练，请查收~（选填）">已完成代练，请查收~</textarea>
                        <div class="text-xs text-gray-400 text-right mt-1" id="msgCount">0/50</div>
                    </div>
                    <!-- 上传图片 -->
                    <div class="bg-white rounded-xl p-4 shadow-sm mb-4">
                        <div class="section-title">
                            <i class="fas fa-check-circle text-green-400"></i>
                            <span>上传完成截图</span>
                        </div>
                        <div class="upload-preview" id="uploadPreview"></div>
                        <div class="upload-add" id="uploadAdd"><i class="fas fa-plus"></i></div>
                        <input type="file" id="uploadInput" accept="image/*" multiple style="display:none;" />
                        <div class="tip">请上传结算截图、胜利界面等能证明完成的图片，最多5张。</div>
                    </div>
                    <button id="submitBtn" class="w-full submit-btn bg-blue-500 text-white rounded-full py-3 text-base font-medium mt-2 hover:bg-blue-600 transition-colors" disabled>提交完成证明</button>
                </div>
            </div>
        </div>
    </div>
    <script>
    // 完成提示语字数统计和校验
    const finishMsg = document.getElementById('finishMsg');
    const msgCount = document.getElementById('msgCount');
    const submitBtn = document.getElementById('submitBtn');
    const uploadInput = document.getElementById('uploadInput');
    const uploadAdd = document.getElementById('uploadAdd');
    const uploadPreview = document.getElementById('uploadPreview');
    let images = [];

    finishMsg.addEventListener('input', function() {
        msgCount.textContent = finishMsg.value.length + '/50';
        checkForm();
    });
    // 初始化字数统计
    msgCount.textContent = finishMsg.value.length + '/50';

    function checkForm() {
        // 完成提示语可为空
        const imgValid = images.length > 0;
        submitBtn.disabled = !imgValid;
    }

    // 图片上传逻辑
    // uploadAdd.onclick = function() {
    //     if(images.length >= 5) return;
    //     uploadInput.click();
    // };
    uploadAdd.style.pointerEvents = 'none';
    uploadAdd.style.opacity = '0.5';
    uploadInput.onchange = function(e) {
        const files = Array.from(e.target.files);
        for(let file of files) {
            if(images.length >= 5) break;
            const reader = new FileReader();
            reader.onload = function(evt) {
                images.push(evt.target.result);
                renderImages();
                checkForm();
            };
            reader.readAsDataURL(file);
        }
        uploadInput.value = '';
    };
    function renderImages() {
        uploadPreview.innerHTML = '';
        images.forEach((src, idx) => {
            const div = document.createElement('div');
            div.className = 'relative';
            div.style.display = 'inline-block';
            div.innerHTML = `<img src="${src}" class="upload-thumb"/><span class="remove-btn" data-idx="${idx}"><i class="fas fa-times"></i></span>`;
            uploadPreview.appendChild(div);
        });
        // 删除按钮
        uploadPreview.querySelectorAll('.remove-btn').forEach(btn => {
            btn.onclick = function() {
                const idx = parseInt(btn.getAttribute('data-idx'));
                images.splice(idx, 1);
                renderImages();
                checkForm();
            };
        });
        // 点击图片放大预览
        uploadPreview.querySelectorAll('img').forEach(img => {
            img.onclick = function() {
                const win = window.open();
                win.document.write('<img src="'+img.src+'" style="width:100%">');
            };
        });
        // 控制添加按钮显示
        uploadAdd.style.display = images.length < 5 ? 'flex' : 'none';
    }

    // 提交按钮逻辑
    submitBtn.onclick = function() {
        if(submitBtn.disabled) return;
        submitBtn.textContent = '提交中...';
        submitBtn.disabled = true;
        // 模拟提交
        setTimeout(() => {
            alert('提交成功，等待发单玩家确认！');
            window.history.back();
        }, 1200);
    };
    </script>
</body>
</html> 